<template>
  <div class="tab-list">
    <a-list
      :bordered="false"
      :split="false"
    >
      <a-list-item
        v-for="(item, index) in items"
        :key="index"
        class="list-item"
        :class="{ 'list-item-active': item.value === currentTab }"
        @click="handleItemClick(item.value)"
      >
        <div class="rank-item">
          <component :is="item.icon" class="item-icon" />
          <div class="item-text">{{ item.text }}</div>
          <a-spin v-if="loading" size="small" />
          <span v-else class="item-count">({{ item.count }})</span>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import {
  IconBook,
  IconCode,
  IconCodeSquare,
  IconFire,
  IconRecord
} from '@arco-design/web-vue/es/icon';
import { onMounted, ref } from 'vue';
import { OjPostService } from '@/api/gen-api/services/OjPostService.ts';
import { OjPostQueryRequest, Paging } from '@/api/gen-api';

interface TabItem {
  value: string;
  icon: any;
  text: string;
  count: number;
}

const props = defineProps({
  currentTab: {
    type: String,
    default: 'synthesis'
  }
});

const loading = ref(true);

const items = ref<TabItem[]>([
  { value: 'synthesis', icon: IconBook, text: '全部分类', count: 0 },
  { value: 'frontend', icon: IconCode, text: '题目讨论', count: 0 },
  { value: 'backend', icon: IconCodeSquare, text: '学习分享', count: 0 },
  { value: 'harmony', icon: IconRecord, text: '技术交流', count: 0 },
  { value: 'aigc', icon: IconFire, text: '系统反馈', count: 0 }
]);

const emits = defineEmits(['tabValueChange']);

const handleItemClick = (value: string) => {
  emits('tabValueChange', value);
  // 在切换分类后更新对应分类的帖子数量
  refreshCategoryCount(value);
};

// 刷新特定分类的帖子数量
const refreshCategoryCount = async (category: string) => {
  try {
    // 只刷新选中的分类数量
    const result = await OjPostService.page({
      page: { pageNum: 1, pageSize: 1 },
      req: { zone: category === 'synthesis' ? '' : category }
    });
    
    if (result?.result?.totalRow !== undefined) {
      const index = items.value.findIndex(item => item.value === category);
      if (index !== -1) {
        items.value[index].count = Number(result.result.totalRow);
      }
    }
  } catch (error) {
    console.error('刷新分类数量失败:', error);
  }
};

// 获取各分类的帖子数量
const getPostCounts = async () => {
  loading.value = true;
  try {
    // 首先获取全部帖子数量
    const totalResult = await OjPostService.page({
      page: { pageNum: 1, pageSize: 1 },
      req: {}
    });
    
    if (totalResult?.result) {
      // 设置总数
      const totalIndex = items.value.findIndex(item => item.value === 'synthesis');
      if (totalIndex !== -1 && totalResult.result.totalRow !== undefined) {
        items.value[totalIndex].count = Number(totalResult.result.totalRow);
      }
      
      // 获取各分类的数量
      const zones = ['frontend', 'backend', 'harmony', 'aigc'];
      
      // 并行请求各分类数量
      const promises = zones.map(zone => {
        return OjPostService.page({
          page: { pageNum: 1, pageSize: 1 },
          req: { zone }
        });
      });
      
      const results = await Promise.all(promises);
      
      // 更新各分类的数量
      results.forEach((result, index) => {
        if (result?.result?.totalRow !== undefined) {
          const zoneIndex = items.value.findIndex(item => item.value === zones[index]);
          if (zoneIndex !== -1) {
            items.value[zoneIndex].count = Number(result.result.totalRow);
          }
        }
      });
    }
  } catch (error) {
    console.error('获取帖子数量失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  getPostCounts();
});
</script>

<style scoped lang="less">
.tab-list {
  padding: 8px 16px;
  background-color: #ffffff;

  :deep(.arco-list-wrapper) {
    border: none;
  }

  :deep(.arco-list-item) {
    border: none;
    padding: 0;
  }
}

.list-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  margin: 4px 4px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 89, 205, 0.08);
  }

  &:hover:not(.list-item-active) {
    background-color: rgb(39 89 205 / 7%);
    border-radius: 6px;

    .item-text {
      color: #2758CD;
    }
  }

  &-active {
    background-color: rgb(39 89 205 / 7%);
    position: relative;
    padding: 8px 16px 8px 28px;
    border-radius: 6px;

    &::before {
      content: '';
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #2758CD;
      border-radius: 2px;
    }

    .item-text {
      color: #2758CD;
    }
  }
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.item-icon {
  font-size: 16px;
  color: var(--color-text-2);
  flex-shrink: 0;
}

.item-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-1);
  transition: color 0.3s;
  flex: 1;
}

.item-count {
  font-size: 14px;
  color: var(--color-text-3);
  flex-shrink: 0;
}
</style>
